<template>
	<view class="card">
		<headTop></headTop>
		<!-- 搜索 -->
		<view class="search">
			<uv-search placeholder="请输入产品名称" v-model="keyword" :clearabled="true" :showAction="false"
				bgColor="rgba(255,255,255, .3)"></uv-search>
		</view>

		<view class="swiper">
			<uv-swiper :list="swiperList" indicator></uv-swiper>
		</view>

		<view class="tabs">
			<uv-grid :border="true" col="5">
				<uv-grid-item v-for="(item, index) in sortList" :key="index">
					<uv-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.name" :size="22"></uv-icon>
					<text class="grid-text">{{ item.title }}</text>
				</uv-grid-item>
			</uv-grid>
		</view>

		<view class="card">
			<view v-for="(item, index) in carList" :key="index" class="cardbox" @tap="toCardDatails">
				<uv-row>
					<uv-col span="4">
						<uv-image class="img" :src="item.img" height="200rpx" width="200rpx"
							mode="aspectFit"></uv-image>
					</uv-col>
					<uv-col span="8">
						<view><uv-text :text="item.title" :lines="1"></uv-text></view>
						<view style="display: flex; justify-content: start; padding: 5rpx 0">
							<uv-text type="primary" :text="item.age"></uv-text>
							<uv-text type="success" :text="item.num"></uv-text>
						</view>
						<uv-row>
							<uv-col span="9">
								<div style="font-size: 12px">
									<view>{{ item.con1 }}</view>
									<viwe>{{ item.con2 }}</viwe>
									<view>{{ item.con3 }}</view>
								</div>
							</uv-col>
							<uv-col span="3">
								<uv-button text="立即办理" :color="getTheme.themeColor" size="mini"
									shape="circle"></uv-button>
							</uv-col>
						</uv-row>
					</uv-col>
				</uv-row>
			</view>
		</view>
		<zwTabBar :defaultSel="2" :bigIdx="2"></zwTabBar>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import headTop from "@/components/headTop/index.vue";
	import zwTabBar from "@/components/zw-tabbar/zw-tabbar.vue";
	import { getIcon } from "@/utils/index";

	const toCardDatails = () => {
		uni.navigateTo({
			url: "/pages/cardDetails/cardDetails"
		});
	};

	const keyword = ref();
	const { iconImg } = getIcon();

	const swiperList = [
		"https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/center_banner1.jpg",
		"https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/center_banner3.jpg",
		"https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/center_banner2.jpg"
	];

	const sortList = ref([
		{ title: "综合推荐", name: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/5G快线.png" },
		{ title: "中国移动", name: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/中国移动.png" },
		{ title: "中国联通", name: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/中国联通.png" },
		{ title: "中国电信", name: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/中国电信.png" },
		{ title: "中国广电", name: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/中国广电.png" }
	]);

	const carList = ref([
		{
			title: "联通飞杰卡【39元215G+100分钟】先激活后发货",
			age: "18-60岁",
			num: "343546人领取",
			con1: "通用流量 215G",
			con2: "定向流量 0G",
			con3: "通话时长 100分钟",
			img: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/05b506158a7f4624b78f147c80412822.jpg"
		},
		{
			title: "联通飞杰卡【39元215G+100分钟】先激活后发货",
			age: "18-60岁",
			num: "343546人领取",
			con1: "通用流量 215G",
			con2: "定向流量 0G",
			con3: "通话时长 100分钟",
			img: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/0fcfa24f88f844e68430c251f83c47c8.jpg"
		},
		{
			title: "联通飞杰卡【39元215G+100分钟】先激活后发货",
			age: "18-60岁",
			num: "343546人领取",
			con1: "通用流量 215G",
			con2: "定向流量 0G",
			con3: "通话时长 100分钟",
			img: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/86984fcd8bd94c7485cad8bcf154ea69.jpg"
		},
		{
			title: "联通飞杰卡【39元215G+100分钟】先激活后发货",
			age: "18-60岁",
			num: "343546人领取",
			con1: "通用流量 215G",
			con2: "定向流量 0G",
			con3: "通话时长 100分钟",
			img: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/05b506158a7f4624b78f147c80412822.jpg"
		},
		{
			title: "联通飞杰卡【39元215G+100分钟】先激活后发货",
			age: "18-60岁",
			num: "343546人领取",
			con1: "通用流量 215G",
			con2: "定向流量 0G",
			con3: "通话时长 100分钟",
			img: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/0fcfa24f88f844e68430c251f83c47c8.jpg"
		},
		{
			title: "联通飞杰卡【39元215G+100分钟】先激活后发货",
			age: "18-60岁",
			num: "343546人领取",
			con1: "通用流量 215G",
			con2: "定向流量 0G",
			con3: "通话时长 100分钟",
			img: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/86984fcd8bd94c7485cad8bcf154ea69.jpg"
		}
	]);

	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
</script>

<style lang="scss" scoped>
	.card {
		.search {
			margin: 3vw 2vw 2vw 2vw;
		}

		.swiper {
			margin: 0 3vw;
		}

		.tabs {
			margin: 2vw 3vw;
		}

		.cardbox {
			margin: 0 3vw;
		}

		.tabs {
			border-radius: 10rpx;
			background-color: rgba(255, 255, 255, 0.7);
			padding-bottom: 10rpx;
		}

		.card {
			border-radius: 10rpx;
			margin: 0 3vw;
			padding-bottom: 10vh;
			background-color: rgba(255, 255, 255, 0.7);

			.cardbox {
				padding: 10rpx 20rpx;
				color: #999;
				border-bottom: 1px solid #dcdcdc;

				.img {
					border-radius: 6rpx;
				}
			}
		}
	}
</style>